
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-4.6.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="../bootstrap-4.6.1-dist/js/jquery.min.js"></script>
    <script src="../bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

<body>
    <div class="row" style="width: 100%;max-height: 400px;">
        <div class=" col-md-8 row">
           
            <div class="  m-3 p-2 r-3">
                物品名称
            </div>
            <div>
                <input type="text" class="rounded-pill m-3 p-2">
            </div>
            <div>
                <button class="rounded-pill p-2 m-3 bg-info">
                    <span class="glyphicon glyphicon-search"></span> 查询
                </button>
            </div>
        </div>
        <div class="col-md-2    ">
            <button class="bg-primary m-3 p-2 rounded-pill "data-toggle="modal" data-target="#myModal">
                <span class="gglyphicon glyphicon-plus m-2" ></span>
                新建
            </button>
            <button class="bg-danger m-3 p-2 rounded-pill ">
                <span class="glyphicon glyphicon-trash m-2"></span>
                删除
            </button>
        </div>
    </div>

    <div>
        <table style="width: 100%;" id="tableOrders" class="table table-bordered table-striped table-hover text-center">
            <tr style="background-color: #746666; ">
                <td><input type="checkbox" name="" id=""></td>
                <td>索引</td>
                <td>物品名称</td>
                <td>图片</td>
                <td>丢失地点</td>
                <td>丢失时间</td>
                <td>用户名</td>
                <td>姓名</td>
                <td>手机</td>
                <td>操作</td>
            </tr>
            <tbody>

            </tbody>
        </table>


        <hr>


    </div>
    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <!--这是模态框的头部，添加这个模态框的名字-->
                    请进行新增！
                </div>
                <div class="modal-body">
                    <!--这是模态框的body部分，可以添加文字或者from表单-->
                    <form action="#" id="from">
                        <label for="#bt" class=" mt-1">索引</label>
                        <input type="text" id="bt" class="w-100 pt-2 a1">
                        <label for="" class=" mt-1">物品名称</label>
                        <input type="text" id="yxj" class="w-100 pt-2 a2">
                        <label for="" class=" mt-1">图片</label>
                        <input type="text" id="slz" class="w-100 pt-2 a3">
                        <label for="" class=" mt-1">丢失地点</label>
                        <input type="text" id="slr" class="w-100 pt-2 a4">
                        <label for="" class=" mt-1">丢失时间</label>
                        <input type="text" class="w-100 pt-2 a5">
                        <label for="" class=" mt-1">用户名</label>
                        <input type="text" class="w-100 pt-2 a6">
                        <label for="" class=" mt-1">姓名</label>
                        <input type="text" class="w-100 pt-2 a7">
                        <label for="" class=" mt-1">手机</label>
                        <input type="text" class="w-100 pt-2 a8">
                    </form>
                </div>
                <div class="modal-footer">
                    <!--这是模态框的底部，是提交和返回按钮的存放地-->
                    <button class="btn btn-primary" onclick="xinjian()" data-dismiss="modal" id="qd">确定</button>
                    <button class="btn btn-danger"  data-dismiss="modal">取消</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</body>
<script>
    var settings = {
        "url": "http://150.158.55.119/readydesk-restServer/service/management/tables/zhangjiye_shiwu/query?size=5",
        "method": "GET",
        "timeout": 0,
        "headers": {

            "Authorization": "Bearer 03bfb1a7ff1348d98f724beb1665d75b",
            "Accept": "*/*",

        },
    };



    $.ajax(settings).done(function (response) {

        for (let i = 0; i < response.data.length; i++) {
            var str = `<tr>
                <td style="line-height: 128px;"><input type="checkbox" name="" id="${response.data[i].ID}"></td>
                        <td style="line-height: 128px;">${response.data[i].SUOYIN}</td>
                        <td style="line-height: 128px;">${response.data[i].WUPINMINGCHENG}</td>
                        <td style="line-height: 128px;">${response.data[i].TUPIAN}</td>
                        <td style="line-height: 128px;">${response.data[i].DIUSHIDIDIAN}</td>
                        <td style="line-height: 128px;">${response.data[i].DIUSHISHIJIAN}</td>
                        <td style="line-height: 128px;">${response.data[i].YONGHUMING}</td>
                        <td style="line-height: 128px;">${response.data[i].XINGMING}</td>
                        <td style="line-height: 128px;">${response.data[i].SHOUJI}</td>
                        <td >
                             <button class="bg-primary m-3 p-2  rounded-pill ">
                <span class="glyphicon glyphicon-file "></span>
                详细
            </button>
            <button class="bg-warning m-3 p-2 rounded-pill ">
                <span class=".glyphicon .glyphicon-pushpin m-2"></span>
                修改
            </button>
          
            <button class="bg-danger m-3 p-2 rounded-pill ">
                <span class="glyphicon glyphicon-trash m-2"></span>
                删除
            </button>
            </td>
                        </tr>`
            $("tbody").append(str)
            // tb.append(str)  
        }
    });
</script>
<script>
    function ad() {
        var a1 = $(".a1").val()
        var a2 = $(".a2").val()
        var a3 = $(".a3").val()
        var a4 = $(".a4").val()
        var a5 = $(".a5").val()
        var a6 = $(".a6").val()
        var a7 = $(".a7").val()
        var a8 = $(".a8").val()
    }
            function xinjian() {
        var a1 = $(".a1").val()
        var a2 = $(".a2").val()
        var a3 = $(".a3").val()
        var a4 = $(".a4").val()
        var a5 = $(".a5").val()
        var a6 = $(".a6").val()
        var a7 = $(".a7").val()
        var a8 = $(".a8").val()
        console.log(a1, a2, a3, a4, a5)
        ad();
        var settings = {
            "url": "http://150.158.55.119/readydesk-restServer/service/management/tables/zhangjiye_shiwu/add",
            "method": "POST",
            "timeout": 0,
            "headers": {

                "Authorization": "Bearer 03bfb1a7ff1348d98f724beb1665d75b",
                "Accept": "*/*",

            },
            "data": {
                "suoyin": a1,
                "wupinmingcheng":a2,
                "tupian":a3,
                "diushididian":a4,
                "diushishijian":a5,
                "yonghuming":a6,
                "xingming":a7,
                "shouji":a8
            }
        };
        $.ajax(settings).done(function (response) {
console.log(response);
});
    }
</script>

</html>